<template>

  <div class="p20 mt10" style="background:#fff" v-loading="loading">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="公告名称" prop="noticeName">
        <el-input v-model="ruleForm.noticeName" placeholder="公告名称" :maxlength="30"></el-input>
      </el-form-item>
      <el-form-item label="经纪商" prop="noticeAngent">
        <el-select v-model="ruleForm.noticeAngent" placeholder="经纪商">
          <el-option label="所有" value=""></el-option>
          <el-option v-for="item of getAngents" :key="item.id" :label="item.name" :value="item.key"></el-option>
          <el-option label="无绑定用户" value="-1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="公告范围" prop="noticeArea">
        <el-radio-group v-model="ruleForm.noticeArea">
          <el-radio label="0">全体用户</el-radio>
          <el-radio label="1">仅讲师</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="公告简介" prop="noticeDesc">
        <el-input type="textarea" v-model="ruleForm.noticeDesc" placeholder="公告简介" :maxlength="70"></el-input>
      </el-form-item>
      <el-form-item label="公告内容" prop="noticeDesc">
        <div id="editor"></div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')" :disabled="disabled">发布</el-button>
        <el-button type="default" @click="saveNoticeForm('ruleForm')" v-if="ruleForm.noticeStatus!=1">保存</el-button>
        <el-button @click="previewNotice('ruleForm')">预览</el-button>
        <el-button @click="$router.go(-1)">关闭</el-button>
        <a href="/static/preview.html" id="preview" target="_blank"></a>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import server from "@/service/index_c";
let E = require("wangeditor");
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      editor: null,
      disabled: false,
      loading: false,
      ruleForm: {
        noticeId: "",
        noticeName: "",
        noticeAngent: "",
        noticeArea: "0",
        noticeDesc: "",
        noticeContent: "",
        noticeStatus: ""
      },
      rules: {
        noticeName: [
          { required: true, message: "请输入公告名称", trigger: "blur" }
        ],
        noticeDesc: [
          { required: true, message: "请输入公告简介", trigger: "blur" }
        ]
      }
    };
  },
  computed: {
    ...mapGetters({
      getAngents: "getAllAngentLists"
    })
  },
  mounted() {
    this.initEditor();
  },
  watch: {
    $route: "eidtNoticeData"
  },
  created() {
    this.eidtNoticeData();
    this.$store.dispatch("setAllAngentLists");
  },
  methods: {
    initEditor() {
      this.editor = new E("#editor");
      this.editor.customConfig.uploadFileName = "file";
      this.editor.customConfig.zIndex = 999;
      this.editor.customConfig.uploadImgServer = server.haibeiServerUpload();
      this.editor.customConfig.uploadImgHooks = {
        customInsert: function (insertImg, result, editor) {
          var url = result.url;
          insertImg(url);
        }
      };
      this.editor.customConfig.onchange = (html) => {
        // html 即变化之后的内容
        this.ruleForm.noticeContent = html;
      }
      this.editor.customConfig.customAlert = info => {
        // info 是需要提示的内容
        this.$message({
          type: "error",
          message: info
        });
      };

      this.editor.create();

    },
    async eidtNoticeData() {
      let queryID = this.$route.query;
      if ("id" in queryID && queryID.id !== "" && queryID.id !== undefined) {
        let resultData = await server.haiheiSearchNoticeListItem({
          id: this.$route.query.id
        });
        if (resultData.success) {
          if ("result" in resultData) {
            let res = resultData.result;
            this.ruleForm = {
              noticeId: res.id,
              noticeName: res.title,
              noticeAngent: res.agent_num,
              noticeArea: res.scope,
              noticeDesc: res.simple_desc,
              noticeContent: res.content,
              noticeStatus: res.status
            };
            this.editor.txt.html(res.content);
          } else {
            this.ruleForm.noticeId = "";
          }
        }
      } else {
        this.ruleForm.noticeId = "";

      }
    },
    submitForm(formName) {
      this.opeationNotice(formName, 1);
    },
    saveNoticeForm(formName) {
      this.opeationNotice(formName, 0);
    },
    opeationNotice(formName, status) {

      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading = true;
          this.disabled = true;
         
          let queryID = this.$route.query;
          let params = {
            status: status,
            scope: this.ruleForm.noticeArea,
            agent_num: this.ruleForm.noticeAngent,
            title: this.ruleForm.noticeName,
           // content: content,
            simple_desc: this.ruleForm.noticeDesc
          };
          let bool = "id" in queryID && queryID.id != "" && queryID.id != undefined
          if (bool) {
            params.id = this.ruleForm.noticeId;
          }
            this.addAndEditNotice(params);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async addAndEditNotice(params) {
  let content = this.ruleForm.noticeContent;

      let resultData = null;
      if ("id" in params) {
        resultData = await server.haiheiEditNoticeListItem(params,content);
      } else {
        resultData = await server.haiheiAddNoticeListItem(params,content);
      }
      if (resultData.success) {
        this.loading = false;;
        this.$message({
          type: "success",
          message: "操作成功"
        });
        setTimeout(() => {
          this.disabled = false;
          this.$router.push({ name: "menu_content_notice" });
        }, 1000);
      } else {
        this.disabled = false;
        this.$message({
          type: "success",
          message: "操作失败"
        });
      }

    },
    previewNotice(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          sessionStorage.removeItem("preview");
          setTimeout(() => {
            let params = {
              status: status,
              scope: this.ruleForm.noticeArea,
              agent_num: this.ruleForm.noticeAngent,
              title: this.ruleForm.noticeName,
              content: this.editor.txt.html(),
              simple_desc: this.ruleForm.noticeDesc
            };

            params.noticeTime = new Date();
            sessionStorage.setItem("preview", JSON.stringify(params));
            document.getElementById("preview").click();
          }, 500);
        }
      });
    }
  }
};
</script>